<template>
  <div class="login-container" :style="{ backgroundImage: `url(${loginBackground})` }">
    <div class="login-box">
        <div class="login-form__title">山径</div>
        <XForm v-model="formData" :items="items" :default-focus="false" class="login-form">
            <template #footer>
                <button
                    class="x-button x-button--primary login-form__button"
                    @click="handleLogin"
                >登录</button>
            </template>
        </XForm>
    </div>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, ref } from 'vue';
// 导入封装的axios服务以及token管理函数
import { useRouter } from 'vue-router';
import { login } from '../api/user.js'
import { setToken } from '../utils/auth.js'

import LoginBackground from '@/assets/images/login_back.jpg'

export default defineComponent({
    setup() {
        const formData = ref({
            username: 'admin',
            password: '123456',
        });
        const items = ref([
            {
                label: '用户名',
                prop: 'username',
                type: 'input',
                placeholder: '请输入用户名',
            },
            {
                label: '密码',
                prop: 'password',
                type: 'input',
                password: true,
                placeholder: '请输入密码',
            },
        ]);
        const errorMessage = ref('');
        const router = useRouter();
        
        const loginBackground = ref(LoginBackground)

        const handleLogin = async () => {
            if (formData.value.username && formData.value.password) {
                login({ "name": formData.value.username, "pass": formData.value.password }).then(res => {
                    console.log(res);
                    setToken(res.result.access_token)
                    router.push('Home')
                })
            } else {
                errorMessage.value = '请输入用户名/密码';
            }
        };

        return {
            formData,
            items,
            handleLogin,
            errorMessage,
            loginBackground,
        };
    },
});
</script>
<style scoped lang="scss">

// 形变动画
@keyframes login-box-animation {
    0% {
        transform: scale(0) translateY(-50px);
        border-radius: 10%;
        opacity: 0;
    }
    50% {
        transform: scale(0.8) translateY(20px);
        border-radius: 40% 60% 55% 45%;
    }
    75% {
        transform: scale(0.95) translateY(-10px);
        border-radius: 45% 55% 50% 50%;
    }
    90% {
        transform: scale(1.02) translateY(5px);
        border-radius: 48% 52% 52% 48%;
    }
    100% {
        transform: scale(1) translateY(0);
        border-radius: 50%;
        opacity: 1;
    }
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    $login-box-width: 300px;
    $login-box-background-padding: 60px;

    .login-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        position: relative;
        width: $login-box-width;

        // 添加水滴反光效果
        &::after {
            content: '';
            position: absolute;
            top: 15%;
            right: 15%;
            width: 20%;
            height: 20%;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            filter: blur(5px);
        }

        &::before {
            content: '';
            position: absolute;
            top: -$login-box-background-padding / 2;
            left: -$login-box-background-padding;
            width: $login-box-width + $login-box-background-padding * 2;
            height: $login-box-width + $login-box-background-padding * 2;
            border-radius: 50%;

            // 水滴效果
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(255, 255, 255, 0.2) 100%
            );
            box-shadow: 
                inset 0 5px 15px rgba(255, 255, 255, 0.5),
                inset 0 -5px 15px rgba(255, 255, 255, 0.3),
                10px 10px 20px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(8px);
            border: none;

            // 动画
            animation: login-box-animation 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-origin: center center;
        }

        // 修改呼吸效果，让它更像水滴晃动
        &:hover::before {
            animation: water-drop 3s ease-in-out infinite;
        }
    }

    .login-form__title {
        font-size: 2em;
        color: #333;
        margin-bottom: 10px;
        z-index: 1;
    }

    .login-form {
        z-index: 1;
    }

    .login-form__button {
        width: 100%;
        margin-top: 10px;
    }
}

/* h2 {
    margin-bottom: 20px;
    font-size: 2em;
    color: #333;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    transition: all 0.3s ease;
}

input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;
}

button:hover {
    background: linear-gradient(135deg, #5a7fe8, #8f6ed5);
} */

.error-message {
    color: red;
    margin-top: 10px;
    font-size: 0.9em;
    display: none;
}

.errorMessageVisible {
    display: block;
}

// 修改呼吸动画为水滴晃动效果
@keyframes water-drop {
    0%, 100% {
        transform: scale(1) translateY(0);
        border-radius: 50%;
    }
    25% {
        transform: scale(1.02) translateY(-2px) skew(1deg);
        border-radius: 48% 52% 52% 48%;
    }
    50% {
        transform: scale(1.01) translateY(2px) skew(-1deg);
        border-radius: 52% 48% 48% 52%;
    }
    75% {
        transform: scale(1.02) translateY(-1px) skew(0.5deg);
        border-radius: 48% 52% 52% 48%;
    }
}
</style>